<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #allmap{height:90%;width:100%;}
        #allmap .anchorBL img {
            display: none;
        }

        #allmap .BMap_cpyCtrl span {
            display: none !important;
        ;
        }

    </style>

    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=jIm26qcRvXN25UpYICxx6k1tX4E45B4i"></script>
    <title>地图展示</title>
</head>


<body>
<div id="allmap"></div>
<input type="button" onclick="add_overlay();" value="添加覆盖物" />
<input type="button" onclick="remove_overlay();" value="删除覆盖物" />
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(110.937882, 23.380321), 19);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var nodeT = new BMapGL.Icon('//mapopen-pub-jsapigl.bj.bcebos.com/demoimg/ditie_beijing_2.png', new BMapGL.Size(11, 11), {
        offset: new BMapGL.Size(5, 5)
    });
    var node = new BMapGL.Icon('//mapopen-pub-jsapigl.bj.bcebos.com/demoimg/zhongheyiyuan.png', new BMapGL.Size(11, 11), {
        offset: new BMapGL.Size(5, 5)
    });

    var marker = new BMapGL.Marker(new BMapGL.Point(110.937882, 23.380321)); // 创建点
    var marker2 = new BMapGL.Marker(new BMapGL.Point(110.944462, 23.379068)); // 创建点

    // var polyline = new BMapGL.Polyline([
    //     new BMapGL.Point(110.937882, 23.380321),
    //     new BMapGL.Point(110.938502, 23.3805),
    //     new BMapGL.Point(110.940056, 23.377319),
    //     new BMapGL.Point(110.942715, 23.37863),
    //     new BMapGL.Point(110.944462, 23.379068)
    // ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线

    // 绘制线
    var polyline = new BMapGL.Polyline([
        new BMapGL.Point(110.937882, 23.380321),
        new BMapGL.Point(110.938502, 23.3805),
        new BMapGL.Point(110.940056, 23.377319),
        new BMapGL.Point(110.942715, 23.37863),
        new BMapGL.Point(110.944462, 23.379068)
    ], {
        strokeStyle: 'dashed',
        strokeColor: 'blue',
        strokeTexture: {
            url: 'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/Icon_road_blue_arrow.png',
            width: 16,
            height: 64
        },
        strokeWeight: 8,
        strokeOpacity: 0.8,
        node: node
    });
    //添加覆盖物
    function add_overlay(){
        map.addOverlay(marker);            //增加点
        map.addOverlay(marker2);            //增加点
        map.addOverlay(polyline);   //添加线

    }
    //清除覆盖物
    function remove_overlay(){
        map.clearOverlays();
    }
    add_overlay();

</script>
